<template>
  <div class="main">
    <div class="top">
      <div class="charts">
        <h4 class="box-title">
          <span>各省终端机统计</span>
          <span>节目总数: {{programCount}}</span>
        </h4>
        <div class="charts-sample" id="charts-bar">
        </div>
      </div>
      <div class="terminal-status">
        <h4 class="box-title">终端分布</h4>
        <div id="charts-pie" class="charts-pie"></div>
      </div>
    </div>
    <div class="down">
      <router-link :to="square.path" v-for="(square, index) in functionSquares" class="function-square-link" :key="index">
        {{ square.title }}
      </router-link>
    </div>
  </div>
</template>

<script>
  import {homePageCount} from '../../api/Terminal'
  import echarts from 'echarts/lib/echarts'
  import pie from 'echarts/lib/chart/pie'
  import bar from 'echarts/lib/chart/bar'

  import tooltip from 'echarts/lib/component/tooltip'
  import title from 'echarts/lib/component/title'
  import legend from 'echarts/lib/component/legend'
  export default {
    name: 'index',
    data () {
      return {
        functionSquares: [
          { title: '节目制作', path: '/' },
          { title: '发布列表', path: '/' },
          { title: '素材列表', path: '/' },
          { title: '终端列表', path: '/' },
          { title: '添加维修单', path: '/' }
        ],
        tableData: [],
        programCount: ''
      }
    },
    mounted() {
      this.homePageCount()
    },
    methods: {
      homePageCount() {
        this.loading = true
        homePageCount().then(res => {
          let { xAxis, series } = this.handleData(res.data.MachineByProvinceCount)
          this.programCount = res.data.programCount
          this.machineON = res.data.machineON
          this.machineOFF = res.data.machineOFF
          this.initChartsBar(xAxis, series)
          this.initChartsPie()
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      handleData(data) {
        let xAxis = {data: []}
        let series = {data: []}
        data.forEach(item => {
          xAxis.data.push(item.province)
          series.data.push(item.count)
        })
        return {
          xAxis,
          series
        }
      },
      initChartsBar (xAxis, series) {
        const myChart = echarts.init(document.getElementById('charts-bar'))

        // 指定图表的配置项和数据
        const option = {
          barColor: '#3863F0',
          barWidth: '25px', // 柱子宽度
          // title: {
          //   text: '在播节目数：3966'
          // },
          tooltip: {},
          legend: {
            data:['']
          },
          xAxis,
          yAxis: {},
          series: [{
            name: '',
            type: 'bar',
            data: series.data,
            itemStyle: {
              normal:{
                color:'#3863F0'
              }
            }
          }]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
      initChartsPie () {
        const myChart = echarts.init(document.getElementById('charts-pie'))

        const option = {
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color: ['#3863F0', '#38CEF0'],

          legend: {
            orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['在线终端机','离线终端机']
          },
          series : [
            {
              type: 'pie',
              radius : '50%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data:[
                {value: this.machineON, name: '在线终端机'},
                {value: this.machineOFF, name: '离线终端机'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

        myChart.setOption(option)
      }
    },
  }
</script>

<style scoped lang="stylus">

  .top
    display flex
    margin-bottom 15px
    .charts,.terminal-status
      height 364px
      box-shadow 0 0 6px 0 rgba(176,176,176,0.4)
      background rgba(255,255,255,1)
    .charts
      margin-right 15px
      width 100%
      box-sizing border-box
      .charts-sample
        height 288px
    .terminal-status
      flex-shrink 0
      width 318px
      .charts-pie
        height 310px
        width 310px
    .box-title
      display flex
      justify-content space-between
      margin 16px 30px
      font-size 20px
      font-weight normal
      color rgba(39,41,43,1)

  .down
    .function-square-link
      display inline-block
      margin 0 15px 15px 0
      width 340px
      height 114px
      line-height 114px
      text-align center
      text-decoration none
      color #27292B
      background rgba(255,255,255,1)
      box-shadow 0 0 6px 0 rgba(176,176,176,0.4)
      &:hover
        color #ffffff
        background transparent url('~@/assets/Index/box-hover.png') center no-repeat
</style>
